<template>
	<view class="wrap">
		<view class="dataTable">
			<u-toast ref="uToast" />
			<view class="dataTable-canvas">
				<view class="dataTable-canvas-title"><text>主要经济指标排名</text></view>
				<view class="container">
					<view class="container-wrap"><echarts ref="echarts" :option="option" canvasId="echarts"></echarts></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			option: {},
			barValue: [],
			barName: []
		};
	},
	onLoad(options) {},
	onReady() {
		this.$nextTick(() => {
			this.drawLines();
		});
	},
	methods: {
		async drawLines() {
			// 这里是初始化的方式，通过id查询找到你的canvas标签
			let barValue = [];
			let barName = [];
			this.$u.api.doWork.getRank().then(res => {
				// this.chartList = res.list;
				// this.chartList.forEach((item) => {
				//   this.barValue.push(item.value);
				//   this.barName.push(item.name);
				// });
				this.barName = res.xAxisData;
				this.barValue = res.tooltipData;

				this.option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
						confine: true
					},
					color: ['#16ceb9'],
					legend: {
						data: [],
						show: false
					},
					grid: {
						left: 10,
						right: 10,
						bottom: 15,
						top: 40,
						containLabel: true
					},
					xAxis: [
						{
							type: 'value',
							axisLine: {
								lineStyle: {
									color: '#999'
								}
							},
							axisLabel: {
								color: '#666'
							},
							show: false
						}
					],
					yAxis: [
						{
							type: 'category',
							axisTick: {
								show: false
							},
							data: this.barName,
							axisLine: {
								lineStyle: {
									color: '#999'
								}
							},
							axisLabel: {
								color: '#666'
							},
							// 设置坐标轴标签颜色
							axisLabel: {
								textStyle: {
									color: '#515A6E',
									fontFamily: 'Microsoft YaHei',
									fontWeight: 400
								},
								formatter: function(name) {
									return name.length > 6 ? name.slice(0, 6) + '...' : name;
								}
							}
						}
					],
					series: [
						{
							name: '',
							type: 'bar',
							label: {
								normal: {
									show: false,
									position: 'inside'
								}
							},
							data: this.barValue,
							itemStyle: {
								// emphasis: {
								//   color: '#37a2da'
								// }
							}
						}
					]
				};
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f8f8f8;
}
.btn-plus {
	position: absolute;
	bottom: 50rpx;
	right: 50rpx;
	z-index: 1;
	opacity: 0.6;
}
.btn-plus:hover {
	opacity: 1;
}

.dataTable {
	padding: 10rpx;
	width: 100%;
	height: 100%;
	&-canvas {
		&-title {
			padding: 20rpx 0rpx;
			> text {
				padding-left: 20rpx;
				width: 100%;
				height: 100%;
				font-size: 32rpx;
				font-weight: 550;
				line-height: 32rpx;
				border-left: 10rpx solid #28b5b1;
			}
		}
		#myEcharts {
			width: 100%;
			height: 600rpx;
		}
	}
}

.container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
.container-wrap {
	width: 100%;
	height: 100%;
}
</style>
